<template>
	<view class="content">
		<view class="search-box">
			<input
				class="search-input"
				focus
				placeholder="搜索商品名称、链接"
				@confirm="onSearch"
				@input="onInput"
			/>
			<view class="search" @tap="onSearch">搜索</view>
		</view>
		<view class="page-search__type">
			<button
				:class="[
					{
						active: params.type == item.value
					}
				]"
				v-for="(item, index) in options.type"
				:key="index"
				@tap="selectType(item.value)"
			>
				{{ item.label }}
			</button>
		</view>
		<!-- 步骤图 -->
		<image class="goods-step" src="@/static/images/index/search-step.png" alt />

		<!-- 搜索历史 -->
		<view class="comm-search history" v-if="historyList.length > 0">
			<view class="title">
				<text class="left">搜索历史</text>
				<view class="clear">
					<text class="clear-all" v-if="isShowClear" @tap="delHistory">清空</text>
					<text @tap="isShowClear = !isShowClear">{{
						isShowClear ? '完成' : '编辑'
					}}</text>
				</view>
			</view>
			<view class="tag-box history" :class="[{ 'drop-down': dropDown }]">
				<view class="history-list" :class="[{ full: historyList.length <= 6 }]">
					<template v-for="(item, index) in historyList">
						<view
							class="tag"
							:class="[{ clear: isShowClear }]"
							:key="index"
							@tap="toResult(item)"
							v-if="index < 20"
						>
							<text class="text">{{ item }}</text>
							<text
								class="iconfont icon-guanbi"
								@tap.stop="removeTag(item)"
								v-if="isShowClear"
							></text>
						</view>
					</template>
				</view>
				<text
					class="iconfont arrow icon-left"
					v-if="historyList.length > 6"
					@tap="dropDown = !dropDown"
				></text>
			</view>
		</view>

		<!-- 热门搜索 -->
		<view class="comm-search hot">
			<view class="title"><text class="left">热门搜索</text></view>
			<view class="tag-box">
				<template v-for="(item, index) in hotKeyList">
					<view
						class="tag hot-tag"
						v-if="index === 0"
						:key="index"
						@tap="toResult(item)"
					>
						<text class="iconfont icon-remenwenti"></text>
						{{ item }}
					</view>
					<view class="tag" v-else :key="index" @tap="toResult(item)">{{
						item
					}}</view>
				</template>
			</view>
		</view>
		<!-- 搜索联想 -->
		<view class="link" v-if="keyWord">
			<view
				class="li"
				v-for="(item, index) in suggestionList"
				:key="index"
				@tap="linkSearch(item)"
				>{{ item }}</view
			>
		</view>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
export default {
	name: 'goods-search',
	data() {
		return {
			dropDown: false,
			isShowDrop: false,
			timeOutEvent: null,
			isShowClear: false,
			keyWord: '',
			historyList: [],
			hotKeyList: [],
			suggestionList: [],
			options: {
				type: [
					{
						label: '淘宝',
						value: 1
					},
					{
						label: '京东',
						value: 2
					},
					{
						label: '拼多多',
						value: 3
					}
				]
			},
			params: {
				type: 1
			}
		};
	},
	onLoad() {
		this.getHotKey();
		this.getHistoryList();
	},
	onShow() {
		// 进入商品搜索
		// plus.statistic.eventTrig('page_change', '进入商品搜索-来源：' + plus.runtime.channel || 'other');
		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	methods: {
		// 获取搜索热词
		getHotKey() {
			let params = {
				type: 30
			};
			this.$service.shopping.shareTemplate.list(params).then(res => {
				this.hotKeyList = res[0].split(',');
			});
		},
		selectType(type) {
			this.params.type = type;
		},
		onSearch() {
			if (!this.keyWord) {
				uni.showToast({
					title: '请输入搜索关键词',
					icon: 'none'
				});
				return false;
			}
			this.setHistoryList(this.keyWord);
			uni.setStorageSync('keyWord', this.keyWord);
			uni.hideKeyboard();
			this.$Router.push({
				path: '/pages/goods/result',
				query: {
					keyWord: this.keyWord,
					type: this.params.type
				}
			});
		},
		onInput(e) {
			this.keyWord = e.detail.value;
			let params = {
				keyWord: this.keyWord
			};
			this.$service.shopping.goods.searchSuggestion(params).then(res => {
				this.suggestionList = res;
			});
		},
		// 获取本地搜索记录
		getHistoryList() {
			this.historyList = uni.getStorageSync('historyList') || [];
			if (this.historyList.length > 0) {
				console.log(this.$refs);
				// let offsetHeight = this.$refs.history.offsetHeight;
				// if (offsetHeight > 85) {
				// 	this.isShowDrop = true;
				// }
			}
		},
		// 存储本地搜索记录
		setHistoryList(param) {
			if (this.historyList.includes(param)) return; //去重
			this.historyList.unshift(param);
			uni.setStorageSync('historyList', this.historyList);
		},
		// 移除tag
		removeTag(tag) {
			this.historyList = this.historyList.filter(item => {
				if (tag === item) {
					return false;
				}
				return true;
			});
			uni.setStorageSync('historyList', this.historyList);
			// 重新计算高度
			setTimeout(() => {
				let offsetHeight = this.$refs.history.offsetHeight;
				if (offsetHeight <= 85) {
					this.isShowDrop = false;
				}
			}, 100);
		},
		//清空历史搜索
		delHistory() {
			this.historyList = [];
			uni.setStorageSync('historyList', this.historyList);
		},
		linkSearch(keyWord) {
			if (keyWord) {
				this.keyWord = keyWord;
			}
			this.onSearch();
		},
		toResult(keyWord) {
			uni.setStorageSync('keyWord', keyWord);
			uni.hideKeyboard();
			this.$Router.push({
				path: '/pages/goods/result',
				query: {
					keyWord: keyWord || '',
					type: this.params.type
				}
			});
		}
	}
};
</script>

<style lang="scss" scope>
.content {
	min-height: 100vh;
	background-color: $color-white;
	.search-box {
		width: 704rpx;
		height: 104rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		@include flexBox(center, center);
		.search-input {
			width: 584rpx;
			border: 2rpx solid $main-color;
			height: 64rpx;
			padding: 0 40rpx;
			border-radius: 50rpx;
			background: #f8f8f8;
			font-size: 26rpx;
		}
		.search {
			font-size: 28rpx;
			color: $main-color;
			margin-left: 24rpx;
		}
	}
	.page-search__type {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 70%;
		margin: auto;
		margin-top: 20rpx;

		button {
			background-color: #fff;
			font-size: 28rpx;
			border-radius: 0;
			padding-bottom: 10rpx;
			letter-spacing: 6rpx;
			font-weight: bold;
			width: 120rpx;
			border-bottom: 4rpx solid #fff;
			transition: 0.5s;

			&::after {
				border: 0;
			}

			&.active {
				border-bottom: 4rpx solid $main-color;
			}
		}
	}
	.goods-step {
		display: block;
		margin: 0 auto 44rpx;
		width: 704rpx;
		height: 178rpx;
		margin-top: 20rpx;
	}
	.comm-search {
		padding: 0 20rpx;
		.title {
			margin-bottom: 30rpx;
			padding: 0 20rpx;
			@include flexBox(space-between, center, row);
			.left {
				font-weight: bold;
				color: #171717;
				font-size: 28rpx;
			}
		}
		.tag-box {
			@include flexBox(flex-start, flex-start, row, wrap);
			transition: 0.5s;
			&.history {
				position: relative;
				max-height: 140rpx;
				overflow: hidden;
				transition: 0.5s;
				.arrow {
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -30rpx;
					transition: 0.5s;
					color: #949494;
					transform: rotate(-90deg);
				}
			}
			.history-list {
				width: 92%;
				&.full {
					width: 100%;
					.tag {
						width: 217rpx;
					}
				}
				@include flexBox(flex-start, center, row, wrap);
				.tag {
					width: 196rpx;
				}
			}
			&.drop-down {
				max-height: unset;
				height: auto;
				.arrow {
					transform: rotate(90deg);
				}
			}
			.tag {
				background-color: #f2f1f6;
				text-align: center;
				width: 156rpx;
				height: 52rpx;
				font-size: 24rpx;
				color: #171717;
				line-height: 52rpx;
				border-radius: 26rpx;
				margin: 10rpx;
				padding: 0 30rpx;
				transition: 0.5s;
				position: relative;
				@include ellipsis(1);
				@include flexBox(center, center);
				.text {
					width: 100%;
					overflow: hidden;
					@include ellipsis(1);
				}
			}
			.hot-tag {
				background-color: #fbebec;
				color: #f63e4c;
				.icon-remenwenti {
					color: #ff204b;
					margin-right: 10rpx;
				}
			}
		}
	}
	.history {
		margin-bottom: 60rpx;
		.title {
			@include flexBox(space-between, center);
			.clear {
				color: $text-grey;
				font-size: 22rpx;
				@include flexBox(center, center);
				.clear-all {
					margin-right: 20rpx;
				}
			}
		}
	}
	.link {
		width: 100%;
		height: calc(100%);
		background-color: white;
		position: fixed;
		top: 120rpx;
		left: 0;
		padding: 0 34rpx;
		overflow: auto;
		.li {
			height: 84rpx;
			font-size: 26rpx;
			line-height: 84rpx;
			border-bottom: 2rpx solid #ebebeb;
		}
	}
}
</style>
